<template>
	<div id="app">
		<img alt="Vue logo" src="./assets/logo.png" />
		<!-- 使用过滤器对名字进行过滤 -->
		<h1 :id="id | format">{{ name | capitalize }}</h1>
		<input type="text" v-model="name" />
	</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
	name: 'App',
	data: function () {
		return {
			name: 'thomas',
			id: 123,
		}
	},
	filters: {
		format: function (id) {
			// id:123 形式
			return 'id:' + id
		},
	},
	/* 局部过滤器 */
	// filters: {
	// 	capitalize: function (value) {
	// 		// return 123
	// 		// 先做判断，如果值为空，返回一个空的值就可以了
	// 		if (!value) return ''
	// 		value = value.toString()
	// 		return value[0].toUpperCase() + value.slice(1)
	// 	},
	// },
	components: {
		HelloWorld,
	},
}
</script>

<style>
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	margin-top: 60px;
}
</style>
